<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="460px" append-to-body>
        <el-form :model="model" ref="form" :rules="rules" inline label-width="80" v-loading="loading">
            <el-form-item label="ID：" prop="id">
                <el-input v-model="model.id" placeholder="请输入ID" clearable />
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>

            <template v-if="model.name">
                <el-divider></el-divider>

            <el-form-item label="归属人：" prop="name" key="name_key">
                {{ model.name }}
            </el-form-item>
            </template>
        </el-form>
    </el-dialog>
</template>

<script>
import { advertisingInquiry } from '@/api/orderSourceWoobilly'
export default {
    name: 'SourceListDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        // source  sku
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            model: {
                id: '',
                name: '',
            },
            rules: {
                id: [{ required: true, message: 'ID不能为空', trigger: ['blur', 'change'] }],
            },
        }
    },
    computed: {
        title() {
            return `按id查询附加信息`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    mounted() {},
    methods: {
        search() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                this.loading = true
                const qyparams = {
                    id: this.model.id,
                }
                advertisingInquiry(qyparams)
                    .then(response => {
                        this.model.name = response.data.name
                    })
                    .finally(() => {
                        this.loading = false
                    })
            })
        },
        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
    },
}
</script>

<style>
.order-page {
    min-height: 100%;
    background: #f1f1f1;
}
.order-header {
    margin-bottom: 24px;
    padding-left: 24px;
}
.header-title-title {
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    margin-right: 8px;
}
.order-content {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}
.order-main {
    width: 66%;
    margin-right: 2%;
}
.order-sub {
    width: 32%;
}
.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 0 4px #eee;
}
.card-content {
    margin: 8px 0;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
}
.card-item {
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: nowrap;
}
.card-item:last-child {
    border-bottom: 0;
}
.card-item-logo {
    width: 50px;
    height: 50px;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    margin-right: 16px;
}
.card-item-logo .el-image {
    width: 50px;
    height: 50px;
}
.card-item-content {
    flex: 1;
}
.card-item-left,
.card-item-right {
    width: 15%;
}
.card-item-right {
    text-align: right;
}
.text-bold {
    font-weight: bold;
}
.text-primary {
    color: #11a983;
}
</style>
